import React, { Component } from 'react'
import {
  Image, Dropdown, Table, Checkbox, Header, Icon, Modal, Button,
} from 'semantic-ui-react'
import { BasicButton, PrimaryButton } from 'components/Button'

const invitorOptions = [
  {
    id: '1',
    name: 'xingjing',
    avatar: 'https://react.semantic-ui.com/images/avatar/small/mark.png',
    teams: ['1', '2', '4'],
  },
  {
    id: '2',
    name: 'shuqian',
    avatar: 'https://react.semantic-ui.com/images/avatar/small/mark.png',
    teams: ['2', '3'],
  },
]

const Teams = [
  {
    id: '1',
    name: 'team1',
    avatar: 'https://react.semantic-ui.com/images/avatar/small/mark.png',
  },
  {
    id: '2',
    name: 'team2',
    avatar: 'https://react.semantic-ui.com/images/avatar/small/mark.png',
  },
  {
    id: '3',
    name: 'team3',
    avatar: 'https://react.semantic-ui.com/images/avatar/small/mark.png',
  },
  {
    id: '4',
    name: 'team4',
    avatar: 'https://react.semantic-ui.com/images/avatar/small/mark.png',
  },
]

const optionsRole = [
  { key: 1, text: '成员', value: 'member' },
  { key: 2, text: '管理员', value: 'admin' },
]

export default class PendingMembers extends Component {
  render() {
    return (
      <Modal trigger={<BasicButton>3 待确认成员</BasicButton>} closeIcon>
        <Header icon="user" content="待确认用户" />
        <Modal.Content>
          <Table basic="very">
            <Table.Body>
              {Teams.map(team => (
                <Table.Row>
                  <Table.Cell>
                    <Image bordered rounded src={team.avatar} size="mini" verticalAlign="middle" />
                    {' '}
                    <span>{team.name}</span>
                  </Table.Cell>
                  <Table.Cell>
                    <Dropdown options={optionsRole} defaultValue="member" />
                  </Table.Cell>
                  <Table.Cell>
                    <Dropdown text="加入的组织">
                      <Dropdown.Menu>
                        <Dropdown.Item>
                          <Table basic="very" collapsing>
                            <Table.Body>
                              <Table.Row>
                                <Table.Cell>
                                  <Header as="h4" image>
                                    <Image
                                      src="https://react.semantic-ui.com/images/avatar/small/mark.png"
                                      rounded
                                      size="mini"
                                    />
                                    <Header.Content>
                                      Mark
                                      <Header.Subheader>Executive</Header.Subheader>
                                    </Header.Content>
                                  </Header>
                                </Table.Cell>
                                <Table.Cell>
                                  <Checkbox />
                                </Table.Cell>
                              </Table.Row>
                              <Table.Row>
                                <Table.Cell>
                                  <Header as="h4" image>
                                    <Image
                                      src="https://react.semantic-ui.com/images/avatar/small/mark.png"
                                      rounded
                                      size="mini"
                                    />
                                    <Header.Content>
                                      Mark
                                      <Header.Subheader>Executive</Header.Subheader>
                                    </Header.Content>
                                  </Header>
                                </Table.Cell>
                                <Table.Cell>
                                  <Checkbox />
                                </Table.Cell>
                              </Table.Row>
                            </Table.Body>
                          </Table>
                        </Dropdown.Item>
                      </Dropdown.Menu>
                    </Dropdown>
                  </Table.Cell>
                  <Table.Cell textAlign="right">
                    <Icon style={{ cursor: 'pointer' }} name="remove" />
                  </Table.Cell>
                </Table.Row>
              ))}
            </Table.Body>
          </Table>
        </Modal.Content>
      </Modal>
    )
  }
}
